<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/tech-blue') // echarts theme
import resize from '@/utils/mixins/resize'

const Data = []
const Link = []
Data.push({
  name: 'UPOrderer',
  fixed: true,
  category: 0,
  value: [600, 600]
})

Data.push({
  name: 'institute0',
  value: [300, 600],
  category: 1
})
Data.push({
  name: 'institute1',
  value: [450, 200],
  category: 1
})
Data.push({
  name: 'institute2',
  value: [750, 200],
  category: 1
})
Data.push({
  name: 'institute3',
  value: [900, 600],
  category: 1
})
Data.push({
  name: 'institute4',
  value: [750, 1000],
  category: 1
})
Data.push({
  name: 'institute5',
  value: [450, 1000],
  category: 1
})
for (let i = 0; i < Data.length; i++) {
  Link.push({
    source: 'UPOrderer',
    target: 'institute' + i,
    lineStyle: {
      color: '#DD2C34',
      width: 3,
      shadowBlur: 2,
      shadowColor: '#c65a5e',
      opacity: 0
    },
    emphasis: {
      lineStyle: {
        opacity: 0.7
      }
    }
  })
  Link.push({
    source: 'institute' + i,
    target: 'institute' + (i + 1) % 6,
    lineStyle: {
      color: '#246eee',
      width: 3,
      shadowBlur: 2,
      shadowColor: '#659aef',
      opacity: 0
    },
    emphasis: {
      lineStyle: {
        opacity: 0.7
      }
    }
  })
}

for (let i = 0; i < 36; i++) {
  Data.push({
    name: 'merchant' + i,
    value: [
      400 * Math.random() - 200 + Data[(i % 6) + 1].value[0],
      400 * Math.random() - 200 + Data[(i % 6) + 1].value[1]
    ],
    category: 2
  })
  Link.push({
    source: 'institute' + (i % 6),
    target: 'merchant' + i,
    lineStyle: {
      color: '#26f553',
      width: 2,
      shadowBlur: 2,
      shadowColor: '#c65a5e',
      opacity: 0
    },
    emphasis: {
      lineStyle: {
        opacity: 0.7
      }
    }
  })
  // Link.push({
  //   source: 'institute' + i,
  //   target: 'merchant' + (i + 6) % 36,
  //   lineStyle: {
  //     color: '#26f553',
  //     width: 1,
  //     shadowBlur: 2,
  //     shadowColor: '#c65a5e',
  //     opacity: 0.7,
  //     curveness: 0
  //   }
  // })
}

export default {
  name: 'RelationChart',
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '800px'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'tech-blue')
      this.chart.setOption({
        backgroundColor: {
          type: 'linear',
          x: 0,
          y: 1,
          x2: 1,
          y2: 0,
          colorStops: [{
            offset: 0, color: '#09203f' // 0% 处的颜色
          }, {
            offset: 1, color: '#537895' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        },
        xAxis: {
          show: false,
          min: 0,
          max: 1200
        },
        yAxis: {
          show: false,
          min: 0,
          max: 1200
        },
        tooltip: {
          show: true
        },
        series: [{
          type: 'graph',
          coordinateSystem: 'cartesian2d',
          layout: 'none',
          focusNodeAdjacency: true,
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 1,
            shadowBlur: 4,
            shadowColor: '#f64b4b'
          },
          label: {
            show: true
          },
          categories: [{
            name: 'UPO',
            symbol: 'circle',
            symbolSize: 50,
            label: {
              color: '#efefef',
              position: 'top'
            },
            itemStyle: {
              color: '#DD2C34'
            }
          },
          {
            name: 'institutes',
            symbol: 'circle',
            symbolSize: 25,
            itemStyle: {
              color: '#246eee'
            },
            label: {
              color: '#efefef',
              position: 'top'
            }
          },
          {
            name: 'merchant',
            symbol: 'circle',
            symbolSize: 10,
            label: {
              show: false
            },
            itemStyle: {
              color: '#26f553',
              opacity: 0
            },
            emphasis: {
              itemStyle: {
                opacity: 0.7
              }
            }
          }],
          data: Data,
          links: Link,
          zlevel: 5,
          tooltip: {
            formatter: '{b}'
          }
        }, {
          type: 'lines',
          coordinateSystem: 'cartesian2d',
          effect: {
            show: true,
            period: 7,
            symbolSize: 4,
            color: '#0db1ff'
          },
          lineStyle: {
            opacity: 0
          },
          data: [{
            coords: [
              [Data[0].value[0], Data[0].value[1]],
              [Data[1].value[0], Data[1].value[1]]
            ]
          }, {
            coords: [
              [Data[0].value[0], Data[0].value[1]],
              [Data[2].value[0], Data[2].value[1]]
            ]
          }, {
            coords: [
              [Data[0].value[0], Data[0].value[1]],
              [Data[3].value[0], Data[3].value[1]]
            ]
          }, {
            coords: [
              [Data[0].value[0], Data[0].value[1]],
              [Data[4].value[0], Data[4].value[1]]
            ]
          }, {
            coords: [
              [Data[0].value[0], Data[0].value[1]],
              [Data[5].value[0], Data[5].value[1]]
            ]
          }, {
            coords: [
              [Data[0].value[0], Data[0].value[1]],
              [Data[6].value[0], Data[6].value[1]]
            ]
          }],
          zlevel: 6
        }
        ]
      })
    }
  }
}
</script>

<style scoped>

</style>
